<template>
  <div style="width:100%;">
    <div class="section-title">
      <div>
        {{ getType(mappingData.type) }}
      </div>
      <div style="flex-grow: 1" />
      <el-button-group v-if="order">
        <el-button size="small" icon="el-icon-caret-top" @click="change(questionBlock.oid,1)" />
        <el-button size="small" icon="el-icon-caret-bottom" @click="change(questionBlock.oid,2)" />
        <el-button size="small" icon="el-icon-delete" @click="change(questionBlock.oid,3)" />
      </el-button-group>
    </div>
    <component :is="`q${mappingData.id}`" v-model="myModelValue" />
  </div>
</template>

<script>
const allComponents = require.context('./questions', false, /\.vue$/)
const res_components = {}
allComponents.keys().forEach(fileName => {
  const comp = allComponents(fileName)
  res_components[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
})

import hardCode from "@/utils/templates";

export default {
  name: 'CustomQuestionBlock',
  components: res_components,
  model: {
    prop: 'modelValue',
    event: 'change'
  },
  props: {
    modelValue: {
      type: Object,
      default: () => {}
    },
    questionBlock: {
      type: Object,
      default: () => null
    },
    order: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      myModelValue: this.modelValue,
      form: {}
    }
  },
  computed: {
    editTemplatesStatus() {
      return this.$store.getters.editTemplates
    },
    mappingData(){
      return hardCode.find((item)=>`q${item.id}`===this.questionBlock.name)
    }
  },
  watch: {
    myModelValue: {
      handler(newVal, oldVal) {
        this.$emit('change', newVal)
      },
      deep: true
    }
  },
  methods: {
    change(oid, type = 1) {
      this.$store.dispatch('app/changeChosenTemplate', { oid, type })
    },
    getType(type) {
      switch (type) {
        case 1 :
          return '描述检查项'
        case 2 :
          return '勾选检查项'
        case 3 :
          return '填写检查项'
        case 4 :
          return '特殊检查项'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.section-title {
  border-left: 3px solid #409eff;
  padding-left: 5px;
  font-size: 18px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.input-div {
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: flex-start;
  line-height: 24px
}

.input-span {
  font-size: 12px;
  font-weight: bolder;
}
</style>
